<script>
export default {
  methods: {
    on_off() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        // 如果WebSocket连接已经存在并且状态为OPEN，则关闭连接
        this.socket.close();
        this.socket = null;
        this.url = require('@/assets/img/image2.png');
        alert("连接已关闭");
      } else {
        // this.url = 'http://192.168.1.40:8087/video'
        console.log("真的")
        this.socket = new WebSocket('ws://192.168.1.40:8091');

        // this.socket = new WebSocket('ws://localhost:8090');
        this.socket.onmessage = function (event) {
          console.log('Received message: ' + event.data);
        };

        this.socket.onclose = function (event) {
          console.log('连接关闭');
        };

        this.socket.onopen = function () {
          alert("连接成功");
        };

        this.socket.onerror = function (event) {
          alert("发生错误连接，代码：" + event.code + ", 原因：" + event.reason);
          console.log('WebSocket connection error:', event);
        };

      }
    },
    sendMessage(message) {
      //添加防抖处理
      const sendMessageDebounced = _.debounce((message) => {
        if (this.socket.readyState === WebSocket.OPEN) {
          console.log('方向是: ' + message);
          if (message === "start_light_on") {
            if (this.light) {
              message = "stop_light";
            }
            this.light = !this.light;
          }
          this.socket.send(message);
        } else {
          console.error('WebSocket connection is not open');
        }
      }, 50); //迟500毫秒后再执行，连续快速按键只会愈发最后一次
      sendMessageDebounced(message)

    }
  },
  data() {
    return {
      url: require('@/assets/img/image1.png'),
      // http://192.168.1.40:8087/video
      socket: null,
      // 灯光
      light: false,
    }
  }
}
</script>

<template>
  <el-container style="background-color: #ffffff;height: 86vh">
    <el-main>
      <el-row :gutter="20">
        <el-col :span="18" style="height: 100%;background-color: #FFFFFF">
          <el-row style="height:80%;">
            <el-col :span="24">
              <div class="block">

                <!--                <img ref="" style="width: 100%; height: 80vh; object-fit: cover;" alt="视频" :src="url"/>-->
                <img ref="" style="width: 100%; height: 80vh; object-fit: cover;" alt="视频" :src="url"/>
                <el-button type="info" round @click="on_off">开关</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>

        <!--        第二列-->
        <el-col :span="6" style="">
          <el-divider></el-divider>
          <el-col style="background-color: #FFFFFF;" :span="24">
            <el-col :span="15">
              <el-row style="margin: 10px 10px">
                <el-col :span="8">
                  <!--左上-->
                  <el-button type="primary" class="white-button" @click="sendMessage('q')">
                    <i class="el-icon-top-left" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--上-->
                  <el-button type="primary" class="white-button" @click="sendMessage('w')">
                    <i class="el-icon-top" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--右上-->
                  <el-button type="primary" class="white-button" @click="sendMessage('e')">
                    <i class="el-icon-top-right" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>

              <el-row style="margin: 10px 10px">
                <el-col :span="8">
                  <!--左-->
                  <el-button type="primary" class="white-button" @click="sendMessage('a')">
                    <i class="el-icon-back" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--中-->
                  <el-button type="primary" class="white-button">
                    <i class="el-icon-refresh" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--右-->
                  <el-button type="primary" class="white-button" @click="sendMessage('d')">
                    <i class="el-icon-right" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>

              <el-row style="margin: 10px 10px">
                <el-col :span="8">
                  <!--左下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('z')">
                    <i class="el-icon-bottom-left" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('s')">
                    <i class="el-icon-bottom" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <!--右下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('c')">
                    <i class="el-icon-bottom-right" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="9">
              <el-row style="margin: 10px">
                <el-col :span="12" style="margin-right: 15px">
                  <!--大聚焦-->
                  <el-button type="primary" class="white-button" @click="sendMessage('start_zoom')">
                    <i class="el-icon-zoom-in" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <!--小聚焦-->
                  <el-button type="primary" class="white-button" @click="sendMessage('start_down_zoom')">
                    <i class="el-icon-zoom-out" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>
              <el-row style="margin: 10px">
                <el-col :span="12" style="margin-right: 15px">
                  <!--开灯-->
                  <el-button type="primary" class="white-button" @click="sendMessage('start_light_on')">
                    <i class="el-icon-s-opportunity" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <!--下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('start_rain_brush')">
                    <i class="el-icon-finished" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>
              <el-row style="margin: 10px">
                <el-col :span="12" style="margin-right: 15px">
                  <!--左下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('')">
                    <i class="el-icon-s-help" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <!--下-->
                  <el-button type="primary" class="white-button" @click="sendMessage('s')">
                    <i class="el-icon-help" style="font-size: 20px;"/>
                  </el-button>
                </el-col>
              </el-row>
            </el-col>


          </el-col>

          <el-col style="background-color: #FFFFFF" :span="24">
            <div style="width: 100%;height:300px;"/>
          </el-col>

          <el-col :span="24" style="background-color: #FFFFFF">
            <div ref="chart" style="width: 100%;height:300px;"/>
          </el-col>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style scoped>
@import "../../assets/css/supervisory/supervisory.css";
</style>
